<script>
import '../assets/css/reset.min.css'
import '../assets/fonts/iconfont.css'
import '../assets/css/style.css'
import "../assets/fonts/iconfont.js";

import API from './api-chat-window'
import Cookie from '../utils/cookie'
import Qs from 'qs'
import EmotionBox from './emotion/EmotionBox'
import EmotionEditor from './emotion/EmotionEditor'
//引入uuid文件
// import uuidv1 from 'uuid/v1'
//const uuid = require('uuid');

export default {
  name: "ChatWindow",
  components: {EmotionBox, EmotionEditor},
  props: {
    isShowWindow: {type: Boolean, default: true},
    customerInfo: {
      type: Object, default() {
        return {}
      }
    }
  },
  data() {
    return {
      willShowConfirm: false,
      // 问候语
      greetingMsg: "",
      // 个人信息
      userInfo: {},
      // 人员权限
      userAuths: {},
      // 第一次回答
      talkAnswers_0: [],
      // 聊天记录
      chatRecord: [],
      // 要发送的消息
      msgToSend: "",
      // 当前时间
      titleDate: new Date(),
      // 满意度窗口
      degreeConfirmStatus: false,
      // 满意度 表单
      satisfactionForm: {
        talkSessionId: null,
        //0不满意，1满意
        type: 1,
        queContent: "",
      },
      // 热门问题
      hotQuestions: [],
      // 搜索问题排行
      searchQuestions: [],
      // 点赞或踩
      upAndDown: {
        show: true,
        type: null,
        commnetId: ""
      },
      robot: {
        robotName: null
      },
      emotionBox: false, needEmotionBox: false, yhyjConfirmStatus: false, yhjy_form: {},
      rules: {
        title: [
          {required: true, message: '建议标题不能为空', trigger: 'change'}
        ], question: [
          {required: true, message: '请选择针对问题', trigger: 'change'}
        ],
      }, imgWinStatus: false,
      initModuleName: "",
      panoramaSrc: "../assets/images/panorama.jpg",
      panoramaSrc2: "../assets/images/panorama2.jpg",
      area: ""
    };
  },
  created() {
    let vue = this;
    //vue.satisfactionForm.talkSessionId = uuid.v4();
    vue.satisfactionForm.talkSessionId = this.uuid();
    let token = vue.$route.query.token;
    if (token) {
      Cookie.setCookie("aitalk_token", token)
      history.replaceState(null, null, window.location.href.replace(/token=([^&]*)?&?/ig, ""))
    }
    window.onbeforeunload = function () {
      if (vue.willShowConfirm) {
        vue.degreeConfirmStatus = true;
        // return false;
        return "";
      }
      //return true;
      //return "";//沈毅 2020-07-13 改
    }
  },
  mounted() {
    if (!String.prototype.trim) {
      String.prototype.trim = function () {
        return this.replace(/^[\n\s\uFEFF\xA0]+|[\n\s\uFEFF\xA0]+$/g, '');
      }
    }
    //
    let vue = this;
    vue.timer = setInterval(() => {
      vue.titleDate = new Date(); //修改数据date
    }, 1000);
    let moduleName = this.$route.query.moduleName;
    if (moduleName) {
      this.answerItemClick(moduleName);
    } else {
      API.getRobotInfo({}).then(res => {
        if (res.data) {
          vue.robot = res.data;
          // 开场语
          vue.greetingMsg = res.data.openingWords;
          vue.chatRecord.push({
            type: "receive_0",
            time: res.resTime,
            data: vue.greetingMsg
          });
        }
      })
    }
    // 个人信息
    API.getUserInfo({}).then(res => {
      if (res.data) {
        vue.userInfo = res.data;
      }
    })
    // 人员权限
    API.getUserAuth({}).then(res => {
      if (res.data) {
        vue.userAuths = res.data.reverse();
      }
    })
    // 热门问题
    API.getHotQuestions().then(res => {
      vue.hotQuestions = res.data;
    })
    // 热门搜索
    API.getSearchQuestions().then(res => {
      vue.searchQuestions = res.data;
    })
  },
  beforeCreate: function () {
    document.body.className="chat-background";
  },
  beforeDestroy() {
    document.body.removeAttribute("class", "chat-background");
    if (this.timer) {
      clearInterval(this.timer); //在Vue例销毁前，清除我们的定时器
    }
  },
  watch: {
    chatRecord(data, changeData) {
      let vue = this;
      vue.$nextTick(function () {
        let chatBox = document.getElementById("chatbox");
        chatBox.scrollTop = chatBox.scrollHeight
      })
    }
  },
  methods: {
    //2021-02-03 shenyi 增加下载附件方法
    downloadFile(meFileObj) {
      let piid = meFileObj.getAttribute("piid");
      let qaBankId = meFileObj.getAttribute("qaBankId");
      let fileId = meFileObj.getAttribute("fileId");
      let fileName = meFileObj.innerText;
      let url = `/api/downloadFile.ajax?piid=${piid}&qaBankId=${qaBankId}&fileId=${fileId}`;
      let msgFile = this.$message.success({
        message: "开始下载附件...",
        type: 'success',
        duration: 0
      })
      API.downloadFile(url).then(res => {
        msgFile.close();
        let blob = new Blob([res]);
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
          let url = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          a.href = url
          a.target = "_self"
          a.style.display = 'none'
          a.setAttribute('download', fileName)
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          window.URL.revokeObjectURL(url)
        }
      });
    },
    //定位焦点
    focusAnswer() {
      //2020-07-31 shenyi 增加 返回答案后焦点定位到问题与答案之间，并且能看到问题
      let answerObjs = document.getElementsByClassName("userAnswer");
      let n = answerObjs.length;
      n > 0 && (function () {
        answerObjs[n - 1].focus();
        answerObjs[n - 1].removeAttribute("tabindex");
      })();
      //2020-07-23 shenyi 增中，针对IE滚动条向下移150
      if (navigator.userAgent.toLowerCase().indexOf('trident') > -1) {
        document.getElementsByClassName("happy-scroll-container")[0].scrollTop = document.getElementsByClassName("happy-scroll-container")[0].scrollTop + 150
      }
    },
    // 发送问题
    sendQuestion(level = 0, areas = '') {
      if(typeof level != 'number'){
        //用户搜索时可能会发送成其他数据
        level = 0;
      }
      let vue = this;
      vue.msgToSend = vue.msgToSend && vue.msgToSend.trim();
      let msgSend = vue.msgToSend;
      let l = msgSend.length;
      if (l > 200) {
        this.$message.error("发送的内容不能超过200个字符");
        return
      }
      if (msgSend == null || msgSend.length == 0) {
        this.$message.error("不能发送空内容");
        vue.msgToSend = ""
        // debugger
        return
      }
      // 发送聊天记录
      vue.chatRecord.push({
        type: "send",
        data: msgSend,
        time: new Date()
      });

      vue.upAndDown.show = true;
      vue.upAndDown.commnetId = null;
      vue.upAndDown.type = null;
      let queLabel;
      /*if (!isNaN(msgSend)) {
        //当用户回答数字时，从机器人最后一次es回答类型中获取他对应的中文
        const lastRecord = vue.chatRecord[vue.chatRecord.length - 2]
        if (lastRecord.data && lastRecord.data instanceof Array && lastRecord.data.length > 1) {
          let pop = lastRecord.data.filter(x => x.index == msgSend).pop()
          if (pop) {
            queLabel = pop.content
          }
        }
      }
      msgSend = queLabel || msgSend*/
      // 显示满意度
      vue.willShowConfirm = true;
      // 问答
      API.getTalkAnswers(Qs.stringify({
        type: 1,
        queName: msgSend,
        queLabel: queLabel,
        level: level,
        areas: areas,
        robotName: vue.robot.robotName || '',
        talkSessionId: vue.satisfactionForm.talkSessionId
      })).then(res => {
        if (!res.result) {
          return
        }
        vue.handleAnswer(res);//2020-07-01 shenyi 处理答案数据，将答案按一级栏目分组
        vue.chatRecord.push({
          time: res.resTime,
          type: "receive_1",
          level: res.nextLevel,
          msgSend: msgSend,
          data: res.data instanceof Array ? res.data : [{content: res.data}]
        });
        if (res.data && res.data.length == 1 && res.data[0].answerType == "1") {
          vue.upAndDown.show = true
          vue.upAndDown.commnetId = res.data[0].id
        }
        this.$nextTick(() => {
          this.focusAnswer();
          this.handleAnswerImgClick();//2021-02-01 shenyi 增加图片单击事件
        })
      });
      this.$nextTick(() => {
        //vue.msgToSend = null;
        //2020-06-30 shenyi 增加 发送问题后焦点定位到问题
        let questionObjs = document.getElementsByClassName("user");
        let n = questionObjs.length;
        n > 0 && (function () {
          questionObjs[n - 1].focus();
          questionObjs[n - 1].removeAttribute("tabindex");
        })();
        setTimeout(() => {
          document.getElementById("robot-emotion-box").focus();
        }, 500);
        vue.msgToSend = null;
      })

      return true;
    },
    // 推送点击
    myPushClick() {
      let vue = this;
      API.getTalkAnswers(Qs.stringify({
        type: 0,
        queName: "",
        queLabel: "",
        robotName: vue.robot.robotName || '',
        talkSessionId: vue.satisfactionForm.talkSessionId
      })).then(res => {
        vue.chatRecord.push({
          time: res.resTime,
          type: "receive_1",
          level: res.nextLevel,
          data: res.data instanceof Array ? res.data : [{content: res.data}]
        });
        this.$nextTick(() => {
          this.focusAnswer();
        })
      });
    },
    // 回答点击
    answerItemClick(answer, level, areas) {
      let vue = this;
      //2020-07-01 shenyi add 选中问题后 改变背景色
      if (typeof (answer) != "string") {
        answer.isActive = true;
        if (vue.answerActived) {
          vue.answerActived.isActive = false;//设置前一个选中取消背景
        }
        vue.answerActived = answer;//记录当前选中的问题
        vue.msgToSend = answer.content;
      } else {
        vue.msgToSend = answer;
      }
      vue.sendQuestion(level, areas);
    },
    // 热门点击
    hotQuestionClick(question, e) {
      e.preventDefault();
      let vue = this;
      vue.msgToSend = question.queName;
      vue.sendQuestion()
    },
    // 简单点击
    simpleClick(question,level,areas) {
      let vue = this;
      vue.msgToSend = question;
      vue.sendQuestion(level,areas)
    },
    // 满意度提交
    satisfactionClick() {
      let vue = this;
      //console.log(vue.satisfactionForm.type)
      if (vue.satisfactionForm.type != 1) {
        // 意见
        if (vue.satisfactionForm.queContent == null || vue.satisfactionForm.queContent.trim().length === 0) {
          vue.msgToSend = ""
          this.$message.error("意见不能为空");

          return;
        } else {
          let l = vue.satisfactionForm.queContent.length;
          if (l > 400) {
            this.$message.error("反馈意见的内容不能超过400个字符");
            return
          }
        }
      }
      API.addSatisfaction(Qs.stringify(vue.satisfactionForm)).then(res => {
            this.$message.success("提交成功");
            vue.degreeConfirmStatus = false
            // 这里是不是要关闭窗口了
            let close_window = document.getElementsByClassName("chat_window_close")[0]
            close_window.click();
            vue.willShowConfirm = false;//2020-08-02 shenyi 提交时关闭窗口不需要再有对话框
            if (IEVersion() != 15) {
              window.close()
            } else {
              window.opener = null;
              window.open(' ', '_self');
              window.close()
            }

          }
      )
    },
    // 点赞或者踩
    upAndDownClick(answer, type, e) {
      e.preventDefault();//阻止缺省事件
      let vue = this;
      // 判断是否已点赞或点踩
      if (answer.praise != -1) {
        if (answer.praise != type) {
          this.$message.error("不能改变评价类型");
          return;
        }
      }
      if (answer.id == null || answer.id.trim().length === 0) {
        this.$message.error("commnetId为空");
        return
      }
      let typeStr = type === 1 ? "点赞" : "点踩"
      if (type === answer.praise) {
        this.$message.error("不能重复" + typeStr);
        return
      }
      vue.upAndDown.commnetId = answer.id;
      vue.upAndDown.type = type
      API.comment(Qs.stringify(vue.upAndDown)).then(res => {
        vue.$message.success(typeStr + "成功");
        answer.praise = type;
      })
    },
    closeWindow() {
      let vue = this;
      if (vue.willShowConfirm) {
        vue.degreeConfirmStatus = true;
      } else {
        // 这里是不是要关闭窗口了
        let close_window = document.getElementsByClassName("chat_window_close")[0]
        close_window.click();
        window.close()
      }
    },
    decode(url) {
      if (url) {
        return unescape(url.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
      }
      return "";
    },
    editorEnter(event) {
      if (event && event.target) {
        event.target.blur()
        event.target.parentElement.focus()
        event.target.focus();
      }
      setTimeout(() => {
        this.sendQuestion();
      }, 1);
    },
    emotionClick(emotionCode) {
      this.msgToSend += emotionCode
      this.emotionBox = false;
    },
    // 将匹配结果替换表情图片
    emotionToImg(res) {
      res = res || ''
      let word = res.replace(/[#;]/gi, '')
      const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙',
        '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵',
        '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼',
        '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡',
        '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳',
        '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', '好的', '爱情', '飞吻', '跳跳',
        '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
      let index = list.indexOf(word)
      if (index > -1) {
        return `<img src="static/image/wx/${index}.gif"  data-code="${word}"  align="middle"/>`
        return res;
      }
    },
    handlerPaste() {
      this.$message.error("不支持粘贴");
      return false;
    },
    //2020-07-01 shenyi 处理答案数据，将答案按一级栏目分组
    handleAnswer(res) {
      let vue = this;
      vue.oneLevelList = [];
      res.data instanceof Array && res.data.map((el, i, els) => {
        //shenyi 2020-07-07 加 praise缺省值
        if (el.twoLevel) {
          if (typeof (el.praise) == "undefined") {
            el.praise = -1;
          }
        }
        let oneLevel = el.oneLevel;
        if (vue.oneLevelList.indexOf(oneLevel) == -1) {
          vue.oneLevelList.push(oneLevel);
          el.isGroup = true;
        } else {
          el.isGroup = false;
        }
        //2020-07-24 shenyi 将所有点赞信息初始化为无
        el.praise = -1;
        this.handleAnswerImg(el)
      })

      return res;
    },
    //2021-01-29 shenyi 处理图片和附件
    handleAnswerImg(el) {
      let content = el.content;
      // const fileServerHost = "http://20.26.103.172:8080/aitalk";
      const fileServerHost = "http://oahraitalk.zj.chinamobile.com/aitalk";
      //const fileServerHost = "http://172.16.2.104:8080/aitalk";
      //const fileServerHost = process.env.VUE_APP_API_HOST;
      if (el.ansContentImageList) {
        let ansContentImageList = el.ansContentImageList
        let imgContent = ""
        for (let i = 0; i < ansContentImageList.length; i++) {
          //imgContent += ansContentImageList[i].replace(/\r\n/g,"").replace(/\n/g,"").replace("<img","<img class='me-img'");//2021-02-17 shenyi 修改 \n
          let elImage = ansContentImageList[i];
          imgContent += `<img class="me-img" src="${fileServerHost}/api/downloadFile.ajax/${elImage.fileName}?fileId=${elImage.fileId}&qaBankId=${elImage.qaBankId}&piid=${elImage.piid}&type=image"></img>`;
        }
        el.content += imgContent
      }
      if (el.ansContentFileList) {
        let ansContentFileList = el.ansContentFileList;
        let fileContent = ""
        for (let i = 0; i < ansContentFileList.length; i++) {
          let elFile = ansContentFileList[i];
          //fileContent += `<div><i class="el-icon-paperclip"></i><a href="javascript:void(0)" class="me-file" piid="${ansContentFileList[i].piid}"
          // qaBankId="${ansContentFileList[i].qaBankId}" fileId="${ansContentFileList[i].fileId}">${ansContentFileList[i].fileName}</a></div>`;
          fileContent += `<div><i class="el-icon-paperclip"></i><a target="_blank" href="${fileServerHost}/api/downloadFile.ajax
/file.file?fileId=${elFile.fileId}&qaBankId=${elFile.qaBankId}&piid=${elFile.piid}&type=file" class="me-file">${elFile.fileName}</a></div>`;

        }
        el.content += fileContent;
      }


    },
    //2021-02-01 shenyi 增加图片和附件单击事件
    handleAnswerImgClick() {
      let meImgList = document.getElementsByClassName("me-img");
      for (let i = 0; i < meImgList.length; i++) {
        meImgList[i].addEventListener("click", (e) => {
          this.imgWinStatus = true;
          let meImgObj = e.currentTarget;
          debugger
          let meImgWin = document.getElementsByClassName("me-img-win")[0];
          let imgHtml = meImgObj.outerHTML.replace("class=\"me-img\"", "style='width:95%'");
          meImgWin.innerHTML = imgHtml;
          meImgWin.addEventListener("click", (e) => {
            this.imgWinStatus = false;
          })
          //  let w = window.open("","图片");
          // w.document.write(meImgObj.outerHTML);
          //   w.document.title = "图片";
        })
      }
      //2021-03-01 去掉下载附件模式，改为链接
      //  let meFileList = document.getElementsByClassName("me-file");
      //  for(let i = 0;i<meFileList.length;i++){
      //         meFileList[i].addEventListener("click",(e)=>{
      //             let meFileObj = e.currentTarget;
      //             this.downloadFile(meFileObj);
      //         })
      //  }
    },
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";
      var uuid = s.join("");
      return uuid;
    },
    showEmotionBox() {//2020-07-24 shenyi add 显示表情包
      this.needEmotionBox = true;
      this.emotionBox = !this.emotionBox;
      this.$nextTick(() => {
        setTimeout(() => {
          this.needEmotionBox = false;
        }, 200);

      })
    },
    hideEmotionBox() {//2020-07-24 shenyi add 点击其它位置隐藏表情包
      if (!this.needEmotionBox) {
        this.emotionBox = false;
      }
    },
    yhjy_open() {//2020-08-26
      this.yhyjConfirmStatus = true;
    },
    yhjy_submit() {//2020-08-26

      if (!this.yhjy_form.question) {
        this.$message.error('请选择针对问题');
        return
      }
      var title = this.yhjy_form.title || "";
      if (title == "") {
        this.$message.error('建议标题不能为空');
        return
      }
      if (title.length > 50) {
        this.$message.error('建议标题不能超过50个字');
        return
      }
      var content = this.yhjy_form.content || "";
      let l = content.length;
      if (l > 500) {
        this.$message.error('建议描述的内容不能超过500个字符');
        return
      }
      API.addOptimizeAdvise(Qs.stringify(this.yhjy_form)).then(res => {
        this.$message.success("提交成功");
        this.yhjy_form = {};
        this.yhyjConfirmStatus = false;
      })
    },
    panoramaMouseIn(e) {
      e.currentTarget.firstElementChild.src = "block";
    },
    panoramaMouseOut(e) {
      e.currentTarget.firstElementChild.src = "none";
    }
  },
  filters: {
    formatDateTime(value) {
      if (typeof (value) == "string") {
        value = value.replace(/-/g, "/");
      }
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "年" + MM + "月" + d + "日 " + h + ":" + m + ":" + s;
    },
  },
};
</script>

<template>
  <div>
    <div class="wrapper" @click="hideEmotionBox()">
      <div class="container clearfix">
        <div class="title">
          <span>
            <img src="../assets/images/logo-left.png"
                 height="30"
                 width="30"
                 class="mt5"/>
            法务智能机器人正在为您服务
          </span>
          <ul class="window_icon">
            <li @click="closeWindow()">
              <img src="../assets/images/icon/icon10.png"/>
              <span class="chat_window_close" style="display: none">X</span>
            </li>
          </ul>
        </div>
        <div class="left">
          <div class="windows_body">
            <happy-scroll
                color="rgba(0,0,0,0.2)"
                size="10"
                :resize="true"
                smaller-move-v1="start"
                bigger-move-h1="end"
                :min-length-h="20"
                :min-length-v="20">
              <div class="office_text con">
                <!-- <div class="conversation-start">
                    <span>{{titleDate | formatDateTime}}</span>
                </div> -->
                <ul class="content" id="chatbox">
                  <template v-for="(record,tabIndex) in chatRecord">
                    <li v-if="record.type=='receive_0'" class="me">
                      <div class="me-data">{{ record.time | formatDateTime }}</div>
                      <div class="me-box">
                        <div class="user">
                          <img src="../assets/images/robot-manbig.png" :title="robot.robotName">
                          <p>{{ robot.robotName }}</p>
                          <!--<div class="greetings">{{greetingMsg}}</div>-->
                        </div>
                        <div class="me-text">
                          您好，请问您想了解<a @click="simpleClick('合规领域')" href="javascript:void(0)">合规领域</a>还是<a @click="simpleClick('业务领域')" href="javascript:void(0)">业务领域</a>涉及的风险问题？
                        </div>
                      </div>
                    </li>
                    <li v-if="record.type=='receive_1'" class="me">
                      <div class="me-data">{{ record.time | formatDateTime }}</div>
                      <div class="me-box">
                        <div class="user userAnswer" :tabindex=tabIndex>
                          <img src="../assets/images/robot-manbig.png" :title="robot.robotName">
                          <!-- <p>{{robot.robotName}}</p> -->
                          <p>
                            {{ record.data.length > 1 ? robot.robotName : record.data[0].robotName || robot.robotName }}</p>
                        </div>

                        <div class="me-text">
                          <div v-if="record.level===2">
                            <div v-if="record.msgSend==='合规领域'">
                              <!--我们合规领域主要有公司治理、反垄断、反不正当竞争、商业贿赂、商业秘密、信息安全、合作伙伴、知识产权、【二级目录中的合规领域】，请点击您感兴趣的领域-->
                              我们合规领域主要有
                              <template v-for="(answer,index) in record.data">
                                <a @click="simpleClick(answer.content, 2, answer.content)" href="javascript:void(0)">{{ answer.content }}</a>
                                <span v-if="index + 1 < record.data.length">、</span>
                              </template>
                              ，请点击您感兴趣的领域
                            </div>
                            <div v-else-if="record.msgSend==='业务领域'">
                              <!--我们根据公司业务划分了九个业务领域，分别是【二级目录中的领域分类】、【二级目录中的领域分类】……..请点击您感兴趣的业务领域-->
                              我们根据公司业务划分了九个业务领域，分别是
                              <template v-for="(answer,index) in record.data">
                                <a @click="simpleClick(answer.content, 2, answer.content)" href="javascript:void(0)">{{ answer.content }}</a>
                                <span v-if="index + 1 < record.data.length">、</span>
                              </template>
                              请点击您感兴趣的业务领域
                            </div>
                          </div>
                          <div v-else-if="record.level===3">
                            <!--小獬提示您，反垄断主要包含四个关键环节：横向垄断协议、纵向垄断协议、滥用市场支配地位、拒绝、阻碍反垄断调查，请点击你感兴趣的关键环节-->
                            {{robot.robotName}}提示您，{{record.msgSend}}主要包含{{record.data.length}}个关键环节：
                            <template v-for="(answer,index) in record.data">
                              <a @click="simpleClick(answer.content, 3, answer.areas)" href="javascript:void(0)">{{ answer.content }}</a>
                              <span v-if="index + 1 < record.data.length">、</span>
                            </template>
                            ，请点击你感兴趣的关键环节
                          </div>
                          <div v-else-if="record.level===4">
                            <!--横向垄断协议主要包含六个风险点，分别是：价格横向垄断协议、限制生产或者销售数量的横向垄断协议、分割市场的横向垄断协议、
                            限制新技术新产品的横向垄断协议、联合抵制交易的横向垄断协议、互联网平台横向垄断协议，请点击您感兴趣的风险点-->
                            {{record.msgSend}}主要包含{{record.data.length}}个风险点，分别是：
                            <template v-for="(answer,index) in record.data">
                              <a @click="simpleClick(answer.content, 4, answer.areas)" href="javascript:void(0)">{{ answer.content }}</a>
                              <span v-if="index + 1 < record.data.length">、</span>
                            </template>
                            ，请点击您感兴趣的风险点
                          </div>
                          <div v-else-if="record.level===5">
                            <!--以下行为会被认为存在风险：
                                1.【五级目录】
                                2.【五级目录】
                                3【五级目录】
                                4（随着五级目录数量动态增加）。。。。
                                请问您需要进一步了解相关案例、责任后果、责任类型、责任主体、法律依据、合规建议么？如需要请点击具体行为。-->
                            以下行为会被认为存在风险：<br/>
                            <template v-for="(answer,index) in record.data">
                              <a @click="simpleClick(answer.content, 5, answer.areas)" href="javascript:void(0)">{{index+1}}. {{ answer.content }}</a>
                              <br/>
                            </template>
                            请问您需要进一步了解相关案例、责任后果、责任类型、责任主体、法律依据、合规建议么？如需要请点击具体行为。
                          </div>
                          <div v-else>
                            <!--专业问题的多答案增加猜想提示-->
                            <div class="me-title" v-if="record.data && record.data.length>1">
                              <span>{{ robot.robotName }}</span>猜您想要咨询的问题是：
                            </div>
                            <template v-for="answer in record.data">
                              <!--一级科目模块显示时需要点击有自动问答功能-->
<!--                              <span :class="{'oneLevel':null!=answer.twoLevel}"
                                    v-if="record.data && record.data.length>=1 && null!=answer.oneLevel && answer.isGroup">
                                <span
                                    @click="null!=answer.oneLevel&&null!=answer.twoLevel?answerItemClick(answer.oneLevel):false"
                                    v-if="null!=answer.oneLevel&&null!=answer.twoLevel"
                                    style="color:blue;font-weight:900">【{{ answer.oneLevel }}】</span>
                                  <span class="twoLevel"
                                        @click="null!=answer.oneLevel&&null!=answer.twoLevel?answerItemClick(answer.twoLevel):false"
                                        v-if="null!=answer.oneLevel&&null!=answer.twoLevel"
                                        style="color:blue;font-weight:900">【{{ answer.twoLevel }}】</span>
                              </span>-->
                              <!--二级科目问题题干显示时换行
                              <span class="twoLevel" v-if="record.data && record.data.length>=1 && null!=answer.twoLevel && answer.answerType!='3'" style="font-weight:900">{{answer.twoLevel}}<br/></span>&nbsp;-->

                              <!--多答案的序号显示
                              <span v-if="record.data && record.data.length>1">{{answer.index}}、</span>-->
                              <!-- 答案正文换行，多行专业答案允许单击后自动问答-->
                              <span :class="{'actived':answer.isActive,'multiConetent':true}"
                                    v-if="record.data  && record.data.length>=1 &&'2'!=answer.answerType && answer.content != ''"
                                    style="color:blue"
                                    href="#"
                                    @click="record.data.length>=1 && '2'!=answer.answerType
                                                                   ?answerItemClick(answer, null != answer.twoLevel ? 5 : 4, answer.areas):false"
                                    v-html="answer.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotionToImg)+(!answer.currency?'':'')"
                              />
                              <!-- 2020-07-10 shenyi add 找不到答案时显示<span class=multiConetent-dept>[部门专属]<span>-->
                              <span class="content2"
                                    v-if="record.data && record.data.length>=1 && null==answer.twoLevel&&'2'==answer.answerType"
                                    v-html="(answer.content||'').replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotionToImg)"
                              />
                              <!-- 其他单行答案不需要自动问答-->
                              <ul class="ansContent" v-if="record.data && record.data.length==1 && null!=answer.twoLevel "
                                  @click="record.data && record.data.length>1 && '1'==answer.answerType ?answerItemClick(answer.content, null != answer.twoLevel ? 5 : 4, answer.areas):false"

                              >
<!--                                <li v-if="answer.content != ''">【{{ answer.content }}】</li>
                                <li v-if="answer.content == ''">【没有找到答案】</li>
                                <li>
                                  <div style="display:inline;" v-if="answer.bankNo">
                                    <label>编号</label><span>{{ answer.bankNo }}</span></div>
                                  <div style="display:inline;" v-if="answer.areas">
                                    <label>领域</label><span>{{ answer.areas }}</span></div>
                                <li><label>一级风险行为</label><span>{{ answer.oneLevel }}</span></li>
                                <li><label>二级风险行为</label><span>{{ answer.twoLevel }}</span></li>
                                <li>
                                  <div style="display:inline;" v-if="answer.referGrid">
                                    <label>是否涉及网格</label><span>{{ answer.referGrid == 1 ? '是' : '否' }}</span></div>
                                  <div style="display:inline;" v-if="answer.referGrid">
                                    <label>对应部门</label><span>{{ answer.referDeptName }}</span></div>
                                </li>
                                <li>
                                  <div style="display:inline;" v-if="answer.respBody">
                                    <label>责任主体</label><span>{{ answer.respBody }}</span></div>
                                  <div style="display:inline;" v-if="answer.respType">
                                    <label>责任类型</label><span>{{ answer.respType }}</span></div>
                                </li>-->
                                <li v-if="answer.caseContent">
                                  <div><label>相关案例</label></div>
                                  <div v-html="answer.caseContent"></div>
                                  <br/>
                                </li>
                                <li v-if="answer.respContent">
                                  <div><label>责任后果</label></div>
                                  <div v-html="answer.respContent"></div>
                                  <br/>
                                </li>
                                <li v-if="answer.respType">
                                  <div><label>责任类型</label></div>
                                  <div>{{answer.oneLevel}}主要是{{answer.respType}}</div>
                                </li>
                                <li v-if="answer.respBody">
                                  <div><label>责任主体</label></div>
                                  <div>{{answer.oneLevel}}责任主体是{{answer.respBody}}</div>
                                  <br/>
                                </li>
                                <li v-if="answer.reguContent">
                                  <div><label>法律依据</label></div>
                                  <div v-html="answer.reguContent"></div>
                                  <br/>
                                </li>
                                <li v-if="answer.compAdvise">
                                  <div><label>合规建议</label></div>
                                  <div v-html="answer.compAdvise"></div>
                                  <br/>
                                </li>
<!--                                <li>
                                  <div><label>特别提醒</label></div>
                                  <div>xxxxxxx</div>
                                </li>-->

                              </ul>
                              <!--专业问题的唯一答案需要增加复制按钮。复制成功加这个颜色tag-succeed-->
                              <button v-if="record.data && record.data.length==1 && '1'==answer.answerType" type="button"
                                      class="copy-will"
                                      v-clipboard:copy="('【'+answer.oneLevel+'】【'+answer.twoLevel+'】'+JSON.stringify(answer.content).replace(new RegExp('<br/>','g'),'')||'')"
                                      v-clipboard:success="function(event) {
                                                                        event.trigger.classList.remove('copy-will')
                                                                        event.trigger.classList.add('copy-success')
                                                                        event.trigger.textContent='已复制'
                                                                      }"
                                      v-clipboard:error="function(event) {
                                                                        event.trigger.classList.remove('copy-will')
                                                                        event.trigger.classList.add('copy-error')
                                                                        event.trigger.textContent='复制出错'
                                                                      }">复制
                              </button>
                              <div v-if="upAndDown.show&&answer.twoLevel" class="praise">
                                <a @click="upAndDownClick(answer,1,$event)"
                                   href="javascript:void(0)"
                                >
                                  <i class="iconfont icon-dianzan gray-color"
                                     :class="answer.praise==1?'yellow-color':''"></i>
                                </a>
                                <a @click="upAndDownClick(answer,0,$event)"
                                   href="javascript:void(0)"
                                >
                                  <i class="iconfont icon-zan gray-color"
                                     :class="answer.praise==0?'green-color2':''"></i>
                                </a>
                              </div>
                            </template>
                          </div>
                        </div>
                      </div>

                    </li>
                    <li v-if="record.type=='send'" class="other">
                      <div class="other-data">{{ record.time | formatDateTime }}</div>
                      <div class="user" :tabindex="tabIndex">
                        <img :src="decode(userInfo.imageUrl)"
                             onerror="this.src='static/image/user.png'"
                             :title="userInfo.userName">
                        <p>{{ userInfo.userName }}</p>
                      </div>
                      <div class="other-text">
                        <p v-html="(record.data||'').replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotionToImg)"></p>
                        <!--<el-button type="primary" plain @click="copy()">复制</el-button>-->
                      </div>
                    </li>
                  </template>
                </ul>
              </div>
            </happy-scroll>
          </div>
          <div class="windows_input" id="talkbox">
            <div class="input_icon">
              <a @click="showEmotionBox()"
                 href="javascript:void(0)">
                <i class="iconfont icon-changyongyu blue-color"></i>
                &nbsp;
              </a>
              <!-- 优化建议 -->
              <a href="javascript:void(0)" @click="yhjy_open">
                <i class="iconfont icon-yhjy" style="font-size:17px"></i>
                优化建议
              </a>
              <template v-for="userAuth in userAuths" class="fr">
                <a v-if="userAuth.name=='我的推送'"
                   @click="myPushClick"
                   :data-id="userAuth.id" href="javascript:void(0)">
                  <i class="iconfont" :class="userAuth.icon"></i>
                  {{ userAuth.name }}
                </a>
                <a v-else :data-id="userAuth.id" target="_blank" :href="userAuth.scriptUrls">
                  <i class="iconfont" :class="userAuth.icon"></i>
                  {{ userAuth.name }}
                </a>
              </template>

            </div>
            <div class="input_box">
              <EmotionBox v-show="emotionBox" @emotion="emotionClick" class="meme"
                          :height="130"></EmotionBox>
              <EmotionEditor v-model='msgToSend' class="textBox"
                             @keyup.13.native="editorEnter"

              ></EmotionEditor>
              <!--                            <textarea v-model="msgToSend" @keyup.enter="sendQuestion" name="" rows="" cols=""-->
              <!--                                      id="input_box"></textarea>-->
              <button @click="sendQuestion" id="send">发送</button>
            </div>
          </div>
        </div>
        <div class="right">
          <h1><i class="iconfont icon-remen"></i>热点问题</h1>
          <ul class="hot-list">
            <li v-for="item in hotQuestions"><span class="link-left"></span>
              <a @click="hotQuestionClick(item, $event)" href="javascript:void(0)" :title="item.queName">
                {{ item.queName }}
              </a>
            </li>
          </ul>
          <div class="search-bottom">
            <h1><i class="iconfont icon-paihang"></i>搜索排行榜</h1>
            <div class="search-cont">
              <div v-for="(search,index) in searchQuestions">
                <a @click="hotQuestionClick(search, $event)" href="javascript:void(0)"
                   :title="search.queName">{{ search.queName }}</a>
              </div>
            </div>
          </div>
          <div class="search-bottom">
            <router-link :to="{path:'/panorama'}" target="_blank">
              <div class="panorama-img"></div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div id="mask" v-show="degreeConfirmStatus">
      <div class="mask">
        <div class="title">
          满意度微调研
          <!-- <span @click="degreeConfirmStatus=false"><img src="../assets/images/icon/icon10.png"/></span> -->
        </div>
        <div class="content">
          <div class="content-user">
            <div class="user"><img src="../assets/images/robot-manbig.png" style="width: 55px" :title="robot.robotName">
              <p>{{ robot.robotName }}</p></div>
            <div class="user-cont">
              <p>您对本次法小獬微服务是否满意？</p>
              <input v-model="satisfactionForm.type" name="radio" id="satisf"
                     type="radio"
                     value="1"
              />
              <label for="satisf" class="radiobox">
                满意
              </label>
              <input name="radio" id="yawp"
                     v-model="satisfactionForm.type"
                     type="radio"
                     value="0"/>
              <label for="yawp" class="radiobox">
                不满意
              </label>
              <div class="yawp" v-show="satisfactionForm.type==0">
                <p>请您描述暂未解决的问题，我们会联动HR智囊团队扩充
                  知识库，期待再次为您服务！</p>
                <textarea v-model="satisfactionForm.queContent" class="yawp-text"></textarea>
              </div>
            </div>
          </div>
          <div class="btn clearfix">
            <button @click="satisfactionClick">提交</button>
          </div>
        </div>
      </div>
    </div>

    <div id="mask_yhjy" v-if="yhyjConfirmStatus">
      <div class="mask">
        <div class="title">
          优化建议
          <span @click="yhyjConfirmStatus=false"><img src="../assets/images/icon/icon10.png"/></span>
        </div>
        <div class="content yhyj">
          <el-form ref="form" :model="yhjy_form" :rules="rules" label-width="80px">
            <el-form-item label="针对问题" prop="question">
              <el-select v-model="yhjy_form.question" placeholder="请选择问题">
                <el-option label="页面" value="页面"></el-option>
                <el-option label="操作" value="操作"></el-option>
                <el-option label="功能" value="功能"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="建议标题" prop="title">
              <el-input v-model="yhjy_form.title"></el-input>
            </el-form-item>
            <el-form-item label="建议描述">
              <el-input type="textarea" v-model="yhjy_form.content" :autosize="{ minRows: 5, maxRows: 5}"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="yhjy_submit">提交</el-button>
              <el-button type="primary" @click="yhyjConfirmStatus=false">取消</el-button>
            </el-form-item>
          </el-form>

        </div>
      </div>
    </div>


    <div id="mask_imgWin" v-show="imgWinStatus">
      <div class="mask" style="width:100%;height:100%">
        <div class="title">
          图片显示
          <span @click="imgWinStatus=false"><img src="../assets/images/icon/icon10.png"/></span>
        </div>
        <div class="content yhyj me-img-win">

        </div>
      </div>
    </div>

  </div>

</template>


